export default config => {
	return `
<template>
    <div :class="[b(), className]" :style="styleSizeName">
        <dv-scroll-board
            ref="scrollBoard"
            :config="config"
            :style="scrollTableStyle"
            @click="handleClick"
        />
    </div>
</template>

<script>
import create from "../../create";
export default create({
    name: '${config.compName}',
    data() {
        return {};
    },
    computed: {
        config() {
            let rules = this.option.alarmConfig;
            for (let i = 0; i < rules.length; i++) {
                let alarmValue = rules[i]["alarmValue"];
                for (let j = 0; j < this.dataChart.length; j++) {
                    let rowAlarmData =
                        this.dataChart[j][rules[i]["alarmField"]];
                    let diffNum =
                        parseFloat(rowAlarmData) - parseFloat(alarmValue);
                    let diff = null;
                    if (diffNum > 0) {
                        diff = [">", ">=", "!="].includes(rules[i].alarmJudge);
                    } else if (diffNum == 0) {
                        diff = ["==", "<=", ">="].includes(rules[i].alarmJudge);
                    } else {
                        diff = ["<", "<=", "!="].includes(rules[i].alarmJudge);
                    }
                    if (isNaN(diffNum)) {
                        if (rowAlarmData === alarmValue) {
                            diff = true;
                        } else {
                            diff = false;
                        }
                    }
                    if (diff) {
                        // diff為true ,则符合告警规则
                        this.dataChart[j][
                            rules[i]["alarmField"]
                        ] = '<span style="color:'+rules[i]['alarmColor'];">'+rowAlarmData+'</span>';
                    }
                }
            }
            let newData = [];
            for (const item of this.dataChart) {
                let obj = {};
                for (const subItem of this.option.column) {
                    obj[subItem.prop] = item[subItem.prop];
                }
                newData.push(obj);
            }
            let data = newData.map((d) => Object.values(d));
            let header = this.option.showHeader
                ? this.option.column.map((d) => d.label)
                : [];
            return {
                index: this.option.index,
                indexHeader: this.option.indexHeader,
                columnWidth: this.option.index ? [50] : [],
                align: this.option.index
                    ? ["center"].concat(
                          this.option.column.map(
                              (d) => this.option.headerTextAlign
                          )
                      )
                    : this.option.column.map(
                          (d) => this.option.headerTextAlign
                      ),
                headerBGC: this.option.headerBackground,
                oddRowBGC: this.option.nthColor,
                evenRowBGC: this.option.othColor,
                headerHeight: this.option.headerHeight,
                rowNum: this.option.showCount,
                waitTime: this.option.waitTime * 1000,
                carousel: this.option.carousel ? "page" : "single",
                hoverPause: this.option.hoverStop,
                header: header,
                data: data
            };
        },
        scrollTableStyle() {
            return {
                width: this.styleSizeName.width,
                height: this.styleSizeName.height
            };
        }
    },
    props: {
        option: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    mounted() {},
    methods: {
        updateChart() {},
        handleClick(item) {
            let { ceil, row, rowIndex, columnIndex } = item;
            this.$globalEvent({
                compId: this.$attrs.index,
                compName: this.$attrs.name,
                compParams: {
                    cellData: ceil,
                    rowData: row,
                    rowIndex,
                    columnIndex
                },
                eventName: "单元格点击事件",
                globalEventList: this.globalEventList
            });
        }
    }
});
</script>

	`;
};
